// 设备品牌列表
import React from 'react';
import './deviceBrandDetail.scss';
import { Row, Col, Button, Form , Select, Input, Table , DatePicker,Space,Radio,Modal, message } from 'antd';
import cookie from 'react-cookies'
import { PlusOutlined } from '@ant-design/icons';
import {brandList,categoryList,addBrand} from '../../../../api/deviceLibrary'
const { Option } = Select;

class DeviceBrandDetail extends React.PureComponent {
    addCarForm = React.createRef();
    state ={
        brand_list:[],
        cpmList:[],
        addBrandListModal:false,
        eq_list:[],
        id:'',
        name:''
    }
    componentWillMount(){
        this.columns = [
            {
                title: '#',
                dataIndex: 'index',
                key: '1',
                align: 'center',
                width: 50,
                render: (text,record,index) => `${index+1}`,
            },
            {
              title: '品牌名称',
              dataIndex: 'bd_name',
              key: '2',
            },
            {
              title: '添加时间',
              dataIndex: 'add_time',
              key: '3',
            },
            {
              title: '添加用户',
              key: '4',
              dataIndex: 'add_user_name'
            }
        
        ];
    }
    componentDidMount(){
        this.getcategoryList()
    }
    shouldComponentUpdate(nextProps, nextState){
        if (this.props.id !== nextProps.id) {
            this.setState({id:nextProps.id,name:nextProps.name},
                ()=>{this.getBrandList(nextProps.id)})
            return true;
        }
        return true
    }
    getBrandList=(id)=>{
        let _this = this
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            id
        }
        brandList(post_data).then(res=>{
            if(res.code == 0) {
                setTimeout(() => {
                    _this.setState({brand_list:res.data.brand_list})
                }, 0);
            }
            
        })
    }
    // 设备列表
    getcategoryList=()=>{
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
        }
        categoryList(post_data).then(res=>{
            if(res.code == 0) {
                let newArray = []
                for (let index = 0; index < res.data.list.length; index++) {
                    for (let item = 0; item < res.data.list[index].eq_list.length; item++) {
                        newArray.push(res.data.list[index].eq_list[item])
                    }
                }
                this.setState({
                    eq_list:newArray
                })
            } 
        })
    }
    // 添加品牌
    reqaddBrandList=()=>{
        let {brand_name,} = this.addCarForm.current.getFieldsValue()
        let {id} = this.state
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            id,
            brand_name
        }
        addBrand(post_data).then(res=>{
            if(res.code == 0) {
                message.success('添加成功')
                 this.setState({addBrandListModal:false})
            } else {
                message.error('添加失败')
            }
            this.getBrandList(id)
        })
    }
    afterClose=()=>{
        this.addCarForm.current.resetFields()
    }
    addPP=()=>{
        let _this = this
        _this.setState({addBrandListModal:true})
        setTimeout(() => {
                _this.addCarForm.current.setFieldsValue({
                    read_uid:this.state.name
                })
        }, 0);
    }
    render() {
        let {brand_list,id,name,addBrandListModal,eq_list} = this.state        
        return (
            <div className="deviceBrandDetail-con">
                <Row className="cb_report">
                    <Col span={24}>
                        <div >
                            <Row>
                                <Col span={12} className="titleInfo">
                                    <div className="divfirstchild"></div>
                                    <div className="divlastchild"><span>品牌列表</span></div>
                                </Col>
                                <Col span={12} className="btn"> <Button icon={<PlusOutlined />} style={{float:'right'}} onClick={this.addPP}> 添加品牌</Button></Col>
                            </Row>  
                        </div>
                        <div className="cb_table">
                            <Table
                                columns={this.columns}
                                dataSource={brand_list}
                                bordered
                                pagination={false}
                            />
                        </div>
                    </Col>
                </Row>
                {/* modal */}
                <Modal
                    title="设备规格选择" 
                    wrapClassName="BrandListModal"
                    visible={addBrandListModal}
                    closable={false}
                    afterClose={this.afterClose}
                    footer={[
                        <Button style={{backgroundColor:'#334BFC',borderRadius:'4px'}} key="submit" type="primary" onClick={this.reqaddBrandList}>
                          添加
                        </Button>,
                        <Button style={{borderRadius:'4px'}} key="back" onClick={()=>{this.setState({addBrandListModal:false})}}>
                            取消
                        </Button>
                      ]}
                    >
                    <div className="addCar">
                            <Form 
                                ref={this.addCarForm} 
                                name="complex-form" 
                                className="noC_form"
                                style={{width:'90%'}} 
                                initialValues={{
                                    // 'read_uid': name,
                                }} >
                                {/* 设备种类 */}
                                <Form.Item
                                    className="formitem"
                                    name="read_uid"
                                    label="设备种类"
                                    labelInValue
                                    >
                                    <Select placeholder="请选择设备类型" disabled  allowClear value={name}>
                                            { eq_list.map((val, ind) => ( <Option value={ val.id } key={ val.id }>{ val.cate_name }</Option> ))}
                                    </Select>
                                </Form.Item>
                                <Form.Item
                                    name="brand_name"
                                    label="设备品牌"
                                >
                                    <Input placeholder="请输入设备品牌"></Input>
                                </Form.Item>
                            </Form>
                        </div>
                </Modal>
            </div>
        )
    }
}
export default DeviceBrandDetail;